import React, {Component} from 'react';
import cssModule from './Swiper1.module.less'

import {Tabs, WhiteSpace, Badge} from 'antd-mobile';

import ChatItem from "../../../components/ChatItem/ChatItem";
class Swiper1 extends Component {
    tabs = [
        {title: <Badge text={'3'}>全部</Badge>},
        {title: <Badge text={'3'}>招呼</Badge>},
        {title: <Badge text={'999'}>沟通中</Badge>},
    ];

    list = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]


    touchmove = (e)=>{
        // console.log(this.TouchBox.scrollTop,this.TouchBox.scrollHeight,this.TouchBox.clientHeight)
    }
    render() {
        let {list} = this
        return (
            <div>
                <Tabs tabs={this.tabs}
                      swipeable={true}
                      initialPage={0}
                      onChange={(tab, index) => {
                          console.log('onChange', index, tab);
                      }}
                      onTabClick={(tab, index) => {
                          console.log('onTabClick', index, tab);
                      }}
                >
                    <div className={cssModule.singPageBox}  ref={val=>this.TouchBox=val} onTouchMove={(e)=>this.touchmove(e)}>
                        {
                            list.map((i,index)=>(
                                <ChatItem key={index} />
                            ))
                        }
                    </div>
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        height: '150px',
                        backgroundColor: '#fff'
                    }}>
                        Content of second tab
                    </div>
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        height: '150px',
                        backgroundColor: '#fff'
                    }}>
                        Content of third tab
                    </div>
                </Tabs>

            </div>
        );
    }
}

export default Swiper1;